<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>毕业设计管理系统 | 登录</title>
	<!--腾讯图片验证码js-->
	<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
	<!-- Mobile specific metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- Force IE9 to render in normal mode -->
	<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
	<link rel='stylesheet' type='text/css'>
	<!-- Css files -->
	<!-- Icons -->
	<link href="/static/assets/css/icons.css" rel="stylesheet" />
	<!-- jQueryUI -->
	<link href="/static/assets/css/sprflat-theme/jquery.ui.all.css" rel="stylesheet" />
	<!-- Bootstrap stylesheets (included template modifications) -->
	<link href="/static/assets/css/bootstrap.css" rel="stylesheet" />
	<!-- Plugins stylesheets (all plugin custom css) -->
	<link href="/static/assets/css/plugins.css" rel="stylesheet" />
	<!-- Main stylesheets (template main css file) -->
	<link href="/static/assets/css/main.css" rel="stylesheet" />
	<!-- Custom stylesheets ( Put your own changes here ) -->
	<link href="/static/assets/css/customs.css" rel="stylesheet" />
	<!--layui.css-->
	<link href="/static/layui/css/layui.css">
	<meta name="msapplication-TileColor" content="#3399cc" />
</head>
<body class="login-page">
<!-- Start #login -->
<div class="login-bg"></div>
<div id="login" class="animated bounceIn">
	<!-- Start .login-wrapper -->
	<div class="login-wrapper">
		<div id="myTabContent" class="tab-content bn">
			<div class="tab-pane fade active in" id="log-in">
				<div class="login-logo">
					<img src="/static/assets/img/logo-green.png">
					<span>毕业设计管理系统</span>
				</div>
				<!--使用手机号+验证码登录-->
				<form action="" method="post" name="loginForm" id="login_Captcha" style="display: block">

					<input style="display: none" id="IP" type="text">
					<div class="form-group">
					<div class="col-lg-12">
						<!--<i class="st-user s16 left-input-icon"></i>-->
						<input type="text"  name="phone" id="phone"  class="form-control left-icon" placeholder="请输入手机号">
					</div>
				</div>
				<div class="form-group">
					<div class="col-lg-12">
						<div class="input-group">
							<input type="text" name="Captcha" id="Captcha" class="form-control left-icon" placeholder="请输入验证码">
							<span class="input-group-btn">
									<button class="btn btn-default" type="button" id="TencentCaptcha" data-appid="2053463569" data-cbfn="callback">发送验证码</button>
								</span>

						</div>
					</div>
				</div>
				<div class="form-group">
					<!-- col-lg-12 end here -->
					<div class="col-lg-12">
						<!-- col-lg-12 start here -->
						<button class="btn btn-success btn-group-justified pull-right"  type="button"  id="loginWithCaptcha">登 录</button>
					</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-8">
						<!-- col-lg-12 start here -->
						<span class="help-block"><a href=""><small>忘记密码 ?</small></a></span>
						<div style="float: left;">
							<input name="form-field-checkbox"  type="hidden" style="padding-top:0px;" />
						</div>
					</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-8 text-right">
						<!-- col-lg-12 start here -->
						<span class="help-block"><a href="#" id="changeForm"><small>用户密码登录</small></a></span>
					</div>
					<!-- col-lg-12 end here -->
				</div>
			</form>

				<!--使用用户名—+密码登录-->
			<form action="" method="post" name="loginForm" id="login_password" style="display: none">
				<div class="form-group">
					<div class="col-lg-12">
						<input type="text"  name="account" id="account"  class="form-control left-icon" placeholder="请输入学号...">
					</div>
				</div>
				<div class="form-group">
					<div class="col-lg-12">
						<input type="text" name="password" id="password" class="form-control left-icon" placeholder="请输入密码...">
					</div>
				</div>
				<div class="form-group">
					<!-- col-lg-12 end here -->
					<div class="col-lg-12">
						<!-- col-lg-12 start here -->
						<button class="btn btn-success btn-group-justified pull-right"  type="button" id="loginWithPassword">登 录</button>
					</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-8">
						<!-- col-lg-12 start here -->
						<span class="help-block"><a href="#"><small>忘记密码 ?</small></a></span>
						<div style="float: left;">
							<input name="form-field-checkbox"  type="hidden" style="padding-top:0px;" />
						</div>
					</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-8 text-right">
						<!-- col-lg-12 start here -->
						<span class="help-block"><a href="#" id="changeFormToCaptcha"><small>验证码登录</small></a></span>
					</div>
					<!-- col-lg-12 end here -->
				</div>
			</form>
			</div>
		</div>
	</div>
	<!-- End #.login-wrapper -->
</div>
<div class="login-copy">
	Copyright &copy; www.crud4j.top ALL Right Reserved
	<br>
	<a href="http://www.beian.miit.gov.cn/">鲁ICP备20001721号</a>
</div>
<!-- End #login -->
<!-- Javascripts -->
<!-- Load pace first -->
<script src="/static/assets/plugins/core/pace/pace.min.js"></script>
<!-- Important javascript libs(put in all pages) -->
<script src="/static/assets/js/jquery-1.8.3.min.js"></script>
<script>
    window.jQuery || document.write('<script src="/static/assets/js/libs/jquery-2.1.1.min.js">\x3C/script>')
</script>
<script src="/static/assets/js/jquery-ui.js"></script>
<script>
    window.jQuery || document.write('<script src="/static/assets/js/libs/jquery-ui-1.10.4.min.js">\x3C/script>')
</script>
<!-- Bootstrap plugins -->
<script src="/static/assets/js/bootstrap/bootstrap.js"></script>
<!-- Form plugins -->
<script src="/static/assets/plugins/forms/icheck/jquery.icheck.js"></script>
<script src="/static/assets/plugins/forms/validation/jquery.validate.js"></script>
<script src="/static/assets/plugins/forms/validation/additional-methods.min.js"></script>
<!-- Init plugins olny for this page -->
<script src="/static/assets/js/pages/login.js"></script>
<!--my js-->
<script src="/static/layui/layui.js"></script>
<!--<script src="../static/js/ajax.js"></script>-->
<script src="/static/js/ajax.js"></script>
<script type="text/javascript">

	// 控制密码登录还是验证码登录
	var form_Captcha=document.getElementById("login_Captcha");
	var form_password=document.getElementById("login_password");
	document.getElementById("changeForm").addEventListener("click",()=>{
        form_Captcha.style="display:none";
        form_password.style="display:block";
	},false);
	document.getElementById("changeFormToCaptcha").addEventListener("click",()=>{
        form_Captcha.style="display:block";
        form_password.style="display:none";
	},false);


    //获得验证码后将button改为*秒后重新获取
    function settime($obj, time) {
        if (time == 0) {
            $obj.attr("disabled", false);
            $obj.css("background", "#ffffff").css("cursor", "pointer");
            $obj.text("获取手机验证码");
            return;
        } else {
            $obj.attr("disabled", true);
            $obj.css("background", "#ccc").css("cursor", "not-allowed");
            $obj.text(time+"秒后重新发送");
            time--;
        }
        setTimeout(function () { settime($obj, time) }, 1000)
    }

    // 得到客户端请求的公网Ip地址
    function getPublicIp(){
        var data={"key":"TUDBZ-4HWWX-W5C4R-T2EG7-5C4MZ-D7BYH"};
        data.output = "jsonp";
        $.ajax({
            type: "get",
            dataType: 'jsonp',
            jsonp: "callback",
            data: data,
            url: 'https://apis.map.qq.com/ws/location/v1/ip',
            success: function (json) {
                document.getElementById("IP").value=json.result.ip;
            }
        });
    }

    //图片验证码的回调函数
    getPublicIp();

    window.callback=function(res){
        // res.ret==0代表验证成功
        if(res.ret == 0){
            //进行发送短信验证码请求,把票据、与验证票据的随机字符串传到后台进行图片验证码的验证
            let phone=document.getElementById("phone").value;
            var IP=document.getElementById("IP").value;
            postAJAX("POST","/api/v1/user/message",{"phone":phone,"ticket":res.ticket,"randstr":res.randstr,"userIP":IP},null,(data)=>{
                layui.use(['layer'], function(){
                    var layer=layui.layer;
                    if(data.code===402 && data.msg==='图片验证码错误'){
                        layer.msg("图片验证码错误");
                    } else if(data.code===401 && data.message==='指定时间内超出限制的发送次数'){
                        layer.msg("超出发送次数限制,请稍后重试")
                    }else if(data.code==0 &&data.msg=='success'){
                        layer.msg("发送成功,请注意查收");
                        settime($("#TencentCaptcha"),90);
					}
                });
            });
        }
    };

    layui.use(['layer'], function(){
        var layer=layui.layer;

        // 用户名+密码登录
        document.getElementById("loginWithPassword").addEventListener("click",()=>{
            let account=document.getElementById("account").value;
            let password=document.getElementById("password").value;
            postAJAX("POST","/api/v1/user/login",{"account":account,"password":password},null,(data)=>{
                if(data.code==509){
					layer.msg("用户名不存在,请检查用户名是否正确")
                } else if(data.code==510){
                    layer.msg("密码错误,请重新输入")
				} else{
                    window.location.href="/toMainPage"
				}
            });
        },false);

        // 用户名+验证码登录
        document.getElementById("loginWithCaptcha").addEventListener("click",()=>{
            var phone=document.getElementById("phone").value;
            var Captcha=document.getElementById("Captcha").value;
            postAJAX("POST","/api/v1/user/login",{"phone":phone,"captcha":Captcha},null,(data)=>{
                if(data.code==509){
                    layer.msg("用户名不存在,请检查用户名是否正确")
                } else if(data.code==513){
                    layer.msg("验证码错误,请重新获取")
                } else{
                    window.location.href="/toMainPage"
                }
            });
        },false);
    });
</script>
</body>
</html>